<template>

  <div class="fat">
    <div>支付了,请返回查看订单状态</div>
    <div>
      ------------------------------------------------------------------------------------------------------
    </div>
    <div v-if='payStatus'>恭喜您支付成功~
      <img
        src="../../public/images/byd.jpg"
        alt=""
      >
    </div>
    <div v-else>支付失败
      <img
        src="../../public/images/honda.jpg"
        alt=""
      >
    </div>

  </div>

</template>

<script>
import http from "@/common/api/request.js";
import qs from "qs"; //引入qs
export default {
  data() {
    return {
      payStatus: false, //默认是false
    };
  },
  created() {
    //创建的时候就运行
    this.getData(); //
  },
  methods: {
    getData() {
      //console.log(this.$route.query.out_trade_no);
      //console.log("-----------------------------"");
      //console.log(this.$route.query.trade_no);
      let datas = {
        //订单号
        out_trade_no: this.$route.query.out_trade_no,
        //out_trade_no: this.$route.query,out_trade_no,//逗号就不行了
        trade_no: this.$route.query.trade_no,
        //参数 参考接口文档
      };
      http
        .$axios({
          url: "/api/successPayment",
          method: "post",
          headers: {
            token: true,
          },
          data: qs.stringify(datas), //加密传参  序列化  安全性序列化
        })
        .then((res) => {
          if (res.code == 2) {
            this.payStatus = true;
          }
        });
    },
  },
};
</script>

<style scoped lang='scss'>
.fat {
  height: 80vh;
  width: 80vw;
  //display: flex;
  justify-content: center;
  padding: auto auto;
  margin: auto; //居中
  div div {
    height: 30%;
    width: 100%;
    flex-wrap: wrap;
  }
  div img {
    height: 70%;
    width: 80vw;
  }
}
</style>
